Nếu bạn chỉ muốn tạo một button đơn giản dễ dùng cho WordPress thì bạn nên code thêm vào chứ không nên dùng Plugin, Dưới đây là hướng dẫn giúp bạn tạo một Shortcode button đơn giản như cái mà tuicode đang dùng.
Thế nào là một shortcode
Từ phiên bản 2.5, Wordpress đã cho phép bạn thêm một số code đơn giản vào trong bài viết. Một shortcode thường có dạng:
[shortcode]
Với shortcode chỉ đơn giản là bạn gõ nó trực tiếp trong bài viết mà không cần đụng đến code gì cả. Trong bài viết này mình sẽ hướng dẫn bạn tạo một shortcode button đơn giản.
Trong ví dụ dưới đây chúng ta sẽ tạo một download button.
Bước 1: Bạn thêm code phía dưới vào file function của theme mà bạn đang dùng.
function download_button($atts, $content = null) {
extract( shortcode_atts( array(
'url' => '#'
), $atts ) );
return '' . do_shortcode($content) . '';
}
add_shortcode('download', 'download_button');
Bước 2: Bạn thêm css cho shortcode button vừa tạo, bạn thêm vào file Style.css của theme đang dùng
/*Main Button Style*/
.download-button{background:#65A343; text-shadow:1px 1px 1px #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);cursor: pointer;display: inline-block;overflow: hidden;padding: 1px;vertical-align: middle}
.download-button span {border-top: 1px solid rgba(255, 255, 255, 0.25);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;display: block;font: bold 12px 'Verdana', 'Arial', sans-serif;padding: 6px 12px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25)}
/*Hover*/
.download-button:hover{background: #558938;text-decoration:none}
/*Active*/
.download-button:active{background:#446F2D}
Bây giờ bạn đã có thể chèn shortcode button vào trong bài viết. Bạn chèn code như sau:
Download
Tạo Shortcode button nhiều màu sắc
Nếu bạn muốn tạo Shortcode button nhiều màu sắc thì bạn thay thế code trong bước 1 ở trên bằng code bên dưới:
function download_button($atts, $content = null) {
extract( shortcode_atts( array(
'url' => '#',
'color' => ''
), $atts ) );
return '<a href="'.$url.'" class="download-button '.$color.'-button"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('download', 'download_button');
Tiếp theo bạn cũng cần thêm CSS cho Shortcode button, mình thêm màu xanh dương chẳng hạn:
/*Blue Button*/
.blue-button{background:#<code>2981e4</code>}
/*Blue Button Hover*/
.blue-button:hover{background:#<code>2575cf</code>}
/*Blue Button Active*/
.blue-button:active{background:#0760AD<code>}
Khi đó Shortcode button mới khi bạn thêm vào bài viết có dạng như sau:
Download
Nếu muốn thêm màu khác bạn chỉ cần thêm CSS là được.
Tham khảo wpexplorer
Hosting tốt nhất